<!DOCTYPE html>
<html>
<head>
    <style>
        .box1
        {
            font-size: 28px;
            width:300px;
            border: 5px solid black;
            font-weight: 700;
        }
        /* -------------------------------------------- */
        .box2 li
        {
            border: 1px solid black;
            width: 100px;
            font-size: 24px;
            height: 40px;
            float: left;
            text-align: center;
            line-height: 40px;
            background-color:#87a78e5a
        }
        /* 隐藏军事 */
        .hidden
        {
            /* display: none; */
            visibility: hidden;
        }
    </style>
    <meta charset="UTF-8" />
    <title>对象的显示与隐藏</title>
</head>
<body>
    <div class="box1">
        <ol>
            <h4>显示和隐藏的属性:</h4>
            <li>visibility属性值:</li>
                <ol type="a">
                    <li>visible(可见)</li>
                    <li>hidden(不可见)</li>
                </ol>
            <li>display属性值:</li>
            <ol type="a">
                <li>双引号""(显示)</li>
                <li>none(隐藏)</li>
            </ol>
            <li>两者的区别:</li>
            <ol type="I">
                <li>visibility:隐藏但依然占据位置</li>
                <li>display:隐藏不占据原来位置</li>
            </ol>
        </ol>
    </div>
    <!-- --------------------------------------------- -->
    <div class="box2">
        <ul type="none">
            <li>新闻</li>
            <li class="hidden">军事</li>
            <li>娱乐</li>
            <li>科技</li>
            <li>金融</li>
        </ul>
    </div>
</body>
</html>